<template>
  <div class="content">
    <input v-model="num.current" step="20" type="number" />
    <div>
      {{ num.tweenedNumber.toFixed(0) }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch } from "vue"
import gsap from "gsap"

const num = reactive({
  current: 0,
  tweenedNumber: 0
})

watch(() => num.current, (newVal, oldVal) => {
  gsap.to(num, {
    duration: 1,
    tweenedNumber: newVal,
  })
})

</script>

<style lang="less" scoped>
  .wraps {
    display: flex;
    flex-wrap: wrap;
    width: calc(24px * 9);
    .item {
      width: 24px;
      height: 24px;
      border: 1px solid #ddd;
    }
  }

  .move {
    transition: all 1s;
  }
</style>